<template>
  <div>
    <el-carousel  height="192.5px">
      <el-carousel-item v-for="item in adForm" style="margin-left: 18px;margin-top: 18px;width: 339px;height: 162.5px;border-radius: 5px">
        <img :src="item.thumbnail" width="100%" height="100%" style="border-radius: 5px">
      </el-carousel-item>
    </el-carousel>
  </div>
</template>

<script>
  import {list} from '@/api/ad';
  import {mapGetters} from 'vuex';
  import utils from '../../../../utils/utils.js'
  export default {
    name: "shuffingSmall",
    data() {
      return {
        pageNum: 1,
        pageSize: 3,
        adForm:[
          {thumbnail:'http://cdn.rzico.com/img/shuffling_img.jpeg'},
          {thumbnail:'http://cdn.rzico.com/img/shuffling_img.jpeg'},
          {thumbnail:'http://cdn.rzico.com/img/shuffling_img.jpeg'}
        ],
        tagIds:[]
      }
    },
    computed: {
      ...mapGetters([
        'mchId'
      ])
    },
    created() {
      this.loadAd()
    },
    props:[
      'content'
    ],
    methods: {
      loadAd() {
        var _this = this
        if (!utils.isNull(this.content.tagids)) {
          this.tagIds = this.content.tagids.split(',');
          for (var i = 0; i < _this.tagIds.length; i++) {
            _this.tagIds[i] = parseInt(_this.tagIds[i])
          }
        }
        _this.pageSize = _this.content.rows;
        let params = new URLSearchParams();
        params.append('pageNum', _this.pageNum);
        params.append('pageSize', _this.pageSize);
        params.append('mchId', this.mchId);
        for (var i = 0; i < _this.tagIds.length; i++) {
          params.append('tagIds',_this.tagIds[i])
        }
        list(params).then(response => {
          console.log(response)
          if (!utils.isNull(response.data.data)){
            this.adForm = response.data.data;
            _this.adForm.forEach(function (item) {
              if (utils.isNull(item.thumbnail)){
                item.thumbnail='http://cdnx.hulu.fj.cn/upload/20200629/rBD_P17oiuSAYl2RAAQj40EPdu8011.png'
              }
              item.thumbnail = utils.thumbnail(item.thumbnail,750,360)
            })
          }
        }).catch(error => {
          console.log('error!!')
        });
      },
    },
  }
</script>

<style scoped>
  .el-carousel__item h3 {
    color: #475669;
    font-size: 14px;
    opacity: 0.75;
    line-height: 150px;
    margin: 0;
  }

  .el-carousel__item:nth-child(2n) {
    background-color: #99a9bf;
  }

  .el-carousel__item:nth-child(2n+1) {
    background-color: #d3dce6;
  }
</style>
